<template>
  <div>
    <el-dialog
      :visible.sync="dialogVisible"
      :title="dialogTitle"
      width="40%"
    >
      <el-tabs v-model="tabsActiveName" tab-position="left">
        <el-tab-pane label="名称信息" name="name">
          <el-form ref="authForm" :model="formAuthGroup" :rules="rules" label-position="top" label-width="100px">
            <el-form-item label="名称" prop="name">
              <el-input v-model="formAuthGroup.name" placeholder="请输入权限组名称" />
            </el-form-item>
            <el-form-item label="描述" prop="description">
              <el-input v-model="formAuthGroup.description" placeholder="请输入权限组描述" type="textarea" />
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="按钮权限" name="btn">
          <div style="margin: 15px 0;" />
          <el-checkbox-group v-model="formAuthGroup.btnPerms">
            <el-checkbox v-for="btn in buttons" :key="btn.value" :label="btn.value" class="btn-checkbox">
              {{ btn.label }}
            </el-checkbox>
          </el-checkbox-group>
        </el-tab-pane>
        <el-tab-pane label="字段权限" name="field">
          <table v-if="fields.length!==0" class="el-table">
            <tr>
              <td>字段</td>
              <td>可见</td>
              <td>编辑</td>
            </tr>
            <tr>
              <td class="text-success">
                全选
              </td>
              <td>
                <el-checkbox v-model="isAllFieldVisible" @change="fieldVisibleAllCheckedHandle" />
              </td>
              <td>
                <el-checkbox v-model="isAllFieldEdit" @change="fieldEditAllCheckedHandle" />
              </td>
            </tr>
            <tr v-for="(field,index) in fields" :key="index">
              <td>{{ field.label }}</td>
              <td>
                <el-checkbox v-model="fieldVisibleChecked[index]"
                             @change="checked=>fieldVisibleChangeHandle(index,checked,field.value)"
                />
              </td>
              <td>
                <el-checkbox v-model="fieldEditChecked[index]"
                             @change="checked=>fieldEditChangeHandle(index,checked,field.value)"
                />
              </td>
            </tr>
          </table>
          <el-empty v-else description="暂无问卷字段" />
        </el-tab-pane>
        <el-tab-pane label="数据权限" name="data">
          <p class="desc-text">
            可以查看到哪些数据
          </p>
          <data-filter :key="`data${new Date()}`" :fields="fields"
                       :form-data-filter="formAuthGroup.dataPerms"
                       @filter="(data)=>{formAuthGroup.dataPerms=data}"
          />
        </el-tab-pane>
      </el-tabs>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitAuthGroupHandle">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import DataFilter from '../data/filter'
import _ from 'lodash'
import {listFormFieldsRequest} from '@/api/project/form'
import {createAuthGroup, updateAuthGroup} from '@/api/project/publish'

export default {
  name: 'FormAuthGroup',
  components: {
    DataFilter
  },
  props: {
    formKey: null
  },
  data() {
    return {
      tabsActiveName: 'name',
      fields: [],
      fieldVisibleChecked: [],
      fieldEditChecked: [],
      isAllFieldVisible: false,
      isAllFieldEdit: false,
      formAuthGroup: {
        formKey: '',
        name: '',
        description: '',
        btnPerms: [],
        fieldVisiblePerms: [],
        fieldEditPerms: [],
        dataPerms: {
          rel: 'AND',
          conditionList: []
        }
      },
      rules: {
        name: [
          {required: true, message: '请输入权限组名称', trigger: 'blur'}
        ]
      },
      buttons: [{
        'label': '查看',
        'value': 'detail'
      }, {
        'label': '新增',
        'value': 'add'
      }, {
        'label': '导入',
        'value': 'import'
      }, {
        'label': '下载附件',
        'value': 'download'
      }, {
        'label': '导出',
        'value': 'export'
      }, {
        'label': '结构查询',
        'value': 'query'
      }, {
        'label': '打印',
        'value': 'print'
      }, {
        'label': '自定义列',
        'value': 'custom'
      }, {
        'label': '编辑',
        'value': 'update'
      }, {
        'label': '删除',
        'value': 'delete'
      }],
      activeIndex: 1,
      dialogVisible: false,
      dialogTitle: '新增权限组'
    }
  },
  created() {
    // 获取问卷字段
    this.queryFormFields()
  },
  methods: {
    // 查询问卷字段
    queryFormFields() {
      listFormFieldsRequest(this.formKey).then((res) => {
        this.fields = res.data
      })
    },
    // 可编辑的字段必须可见
    fieldVisibleChangeHandle(index, value, formItemId) {
      // 设置为不可见时 编辑也要被取消
      if (!value) {
        this.fieldEditChecked[index] = false
      }
    },
    fieldEditChangeHandle(index, value, formItemId) {
      // 设置可编辑 默认勾选显示
      if (value) {
        this.fieldVisibleChecked[index] = true
      }
    },
    // 处理被选中的字段
    fieldCheckedHandle() {
      this.fields.forEach((field, index) => {
        this.fieldVisibleChecked[index] = _.includes(this.formAuthGroup.fieldVisiblePerms, field.value)
        this.fieldEditChecked[index] = _.includes(this.formAuthGroup.fieldEditPerms, field.value)
      })
    },
    // 显示字段全选
    fieldVisibleAllCheckedHandle(val) {
      this.fieldVisibleChecked = Array(this.fields.length).fill(this.isAllFieldVisible)
    },
    // 编辑字段全选
    fieldEditAllCheckedHandle(val) {
      this.fieldEditChecked = Array(this.fields.length).fill(this.isAllFieldEdit)
    },
    submitAuthGroupHandle() {
      this.$refs['authForm'].validate((valid) => {
        if (valid) {
          if (this.formAuthGroup.btnPerms.length === 0) {
            this.msgError('请选择可以操作的按钮')
            this.tabsActiveName = 'btn'
            return
          }
          // 清除 避免重复
          this.formAuthGroup.fieldVisiblePerms = []
          this.formAuthGroup.fieldEditPerms = []
          this.fields.forEach((field, index) => {
            if (this.fieldVisibleChecked[index] == true) {
              this.formAuthGroup.fieldVisiblePerms.push(field.value)
            }
            if (this.fieldEditChecked[index] == true) {
              this.formAuthGroup.fieldEditPerms.push(field.value)
            }
          })
          if (this.formAuthGroup.fieldVisiblePerms.length === 0) {
            this.msgError('请至少选择一个可见字段')
            this.tabsActiveName = 'field'
            return
          }
          this.formAuthGroup.formKey = this.formKey
          if (this.formAuthGroup.id) {
            updateAuthGroup(this.formAuthGroup).then((res) => {
              this.msgSuccess('修改权限组成功')
              this.dialogVisible = false
              this.$parent.$parent.queryAuthGroupListHandle()
            })
          } else {
            createAuthGroup(this.formAuthGroup).then((res) => {
              this.msgSuccess('创建权限组成功')
              this.dialogVisible = false
              this.$parent.$parent.queryAuthGroupListHandle()
            })
          }
        } else {
          this.tabsActiveName = 'name'
          return false
        }
      })
    },
    clearFormAuthGroup() {
      this.fieldVisibleChecked = []
      this.fieldEditChecked = []
      this.formAuthGroup = {
        formKey: '',
        name: '',
        description: '',
        btnPerms: [],
        fieldVisiblePerms: [],
        fieldEditPerms: [],
        dataPerms: {
          rel: 'AND',
          conditionList: []
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-tabs__content {
  padding: 0 20px;
}

.desc-text {
  color: #909399;
}

.btn-checkbox {
  display: inline-block;
  width: 27%;
}
</style>
